<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>安全首页</title>
    <script>
        var requireExtraPaths = {
            extrance: '../../../safety_js/report/homeSafe'
        };
        var cssFileLoadArr = ['/content/css/sub/homePage.css'];
    </script>
    <!--界面Head标签中需要引用一下JS-->
    <script type="text/javascript"
            src="http://webapi.amap.com/maps?v=1.3&key=7d24e3c0b1de00fcfc07dcb16ac3a087&plugin=AMap.LineSearch,AMap.ToolBar"></script>
    <jsp:include flush="true" page="../../base/base.jsp"></jsp:include>
</head>
<body class="site-body" style="overflow: auto;padding-bottom: 20px;">
<a class="page-print-btn" onclick="window.print();"></a>

<div class="index-content anquan-index" style="overflow: hidden;">
    <div class="time-select-fixed" style="width: 100%;">
        <div class="time-select-bar ct-shadow clearfix">
            <div class="line-select">
                <span class="text">线路选择</span>
                <span id="showlineName"></span>

                <div class="line-wrap">
                    <input type="text" class="search-input" id="lineSelected">

                    <div class="tree-box ">
                        <ul id="lineTree" class="ztree line-dropdown"></ul>
                    </div>
                </div>
            </div>
            <div class="time-select time-select2  ml0" id="dateDiv">
                <a class="active" val="02">昨天</a>
                <a val="03">近7天</a>
                <a val="04">本月</a>
                <a val="05">上月</a>
                <a val="06">今年</a>
                <a val="07">去年</a>
            </div>
        </div>
    </div>
    <div class="blank-65"></div>
    <div class="data-num clearfix mt25">
        <div class="item">
            <div class="item-box">
                <a id="seriousFaultMore">
                    <div class="ct-shadow">
                        <h4>严重故障数（次）</h4>

                        <p id="SERIOUS_FAULTS"></p>
                    </div>
                </a>
            </div>
        </div>
        <div class="item">
            <div class="item-box">
                <a id="commonFaultsMore">
                    <div class="ct-shadow">
                        <h4>一般故障数（次）</h4>

                        <p id="COMMON_FAULTS"></p>
                    </div>
                </a>
            </div>
        </div>
        <div class="item">
            <div class="item-box">
                <a id="faultCarsMore">
                    <div class="ct-shadow">
                        <h4>故障车辆数（辆）</h4>

                        <p id="FAULT_CARS"></p>
                    </div>
                </a>
            </div>
        </div>
        <div class="item">
            <div class="item-box">
                <a id="unsafeBhvMore">
                    <div class="ct-shadow">
                        <h4>不良行为数（次）</h4>

                        <p id="UBSAFE_BHV"></p>
                    </div>
                </a>
            </div>
        </div>
        <div class="item">
            <div class="item-box">
                <a id="unsafeDriversMore">
                    <div class="ct-shadow">
                        <h4>不良行为驾驶员数（人）</h4>

                        <p id="UBSAFE_CARS"></p>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="ct-grid-2 clearfix mt25">
        <div class="inner-box">
            <div class="ct-shadow">
                <div class="layout-inner">
                    <div class="layout-left">
                        <div class="clearfix">
                            <div class="title-bar ml0">
                                <a class="link-more" id="faultsTendencyMore">详细信息</a>车辆故障趋势图
                            </div>
                        </div>
                        <div class="chart-box  mt25">
                            <div id="faultsTendency" style="height: 350px;width: 500px;margin: 0 auto;"></div>
                        </div>
                    </div>
                    <div class="layout-right">
                        <div class="pl15">
                            <div class="tab-panel2 clearfix">
                                <a id="faultRankInfoMore" class="more">详细信息</a>

                                <div class="item active" id="changeFaultsRank">故障类型排名<span class="arrow"></span></div>
                                <div class="item" id="changeVehicleRank">车辆故障排名<span class="arrow"></span></div>
                            </div>
                            <div class="table-wrap mt20" id="faultTypeDiv">
                                <div id="faultType" style="height: 350px;width: 500px;margin: 0 auto;"></div>
                            </div>
                            <div class="table-wrap mt20" id="vehicleTypeDiv" style="display: none;">
                                <table width="100%" id="vehicleTypeTab" class="table-style3">
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="ct-grid-2 clearfix mt25" style="page-break-before: always;">
        <div class="inner-box">
            <div class="ct-shadow">
                <div class="layout-inner">
                    <div class="layout-left">
                        <div class="clearfix">
                            <div class="title-bar ml0">
                                <a class="link-more ml15" id="unsafeTendencyMore">详细信息</a><a
                                    class="ml15 link-more">惯性行为</a><a class="ml15 link-more">情绪分析</a>不安全行为趋势图
                            </div>
                        </div>
                        <div class="chart-box  mt25">
                            <div id="unsafeTendency" style="height: 350px;width: 500px;margin: 0 auto;"></div>
                        </div>
                    </div>
                    <div class="layout-right">
                        <div class="pl15">
                            <div class="tab-panel2 clearfix">
                                <a class="more" id="unsafeBhvInfoMore">详细信息</a>

                                <div class="item active" id="changeUnsafeBhv">不安全行为排名<span class="arrow"></span></div>
                                <div class="item" id="changeUnsafeDrv">驾驶员不安全行为排名<span class="arrow"></span></div>
                            </div>
                            <div class="table-wrap mt20" id="unsafeBhvDiv">
                                <div id="unsafeType" style="height: 350px;width: 500px;margin: 0 auto;"></div>
                            </div>
                            <div class="table-wrap mt20" id="unsafeDrvDiv" style="display: none;">
                                <table class="table-style3" width="100%" id="unsafeDrvTab">
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <h2 class="title-map" style="page-break-before: always;">
        <span class="fl">不安全行为地图</span>

        <div class="filter">
            <label class="label-text">异常行为：</label>
            <span id='selForm'>
                <select id="drvSctBhvType" name="drvSctBhvType" dict="DRV00000"
                        style="width: 187px;background-color: #fff;">
                    <option value="">全部</option>
                </select>
            </span>
        </div>
        <span class="sub-nav5" style="margin-left: 100px;">
            <a class="active" id="changeUp">上行</a><a id="changeDown">下行</a>
        </span>

        <div class="title-tab">
            <a class="active" id="changeUnsafeMap">地图行为分布</a>
            <span>|</span>
            <a id="changeUnsafeStn">站点行为分布</a>
            <span>|</span>
            <a id="changeUnsafeTime">时间行为分布</a>
        </div>
    </h2>
    <div class="unsafe-map ct-shadow clearfix" id="unsafeMapDiv">
        <div class="unsage-map-box" style="height: 427px;">
            <div id="iCenter" style="width: 100%; height: 700px;"></div>
        </div>
    </div>

    <div class="unsafe-map ct-shadow clearfix" id="unsafeStnDiv"
         style="display: none;overflow: hidden;">
        <div class="unsage-map-box" style="height: 427px;">

            <div class="m-station" id="upStnLineDiv">
                <article class="bus-stop-list bus-stop-list2" style="width:3270px" id="articleWidth">
                    <ul class="clearfix" id="stnLineCharts">
                    </ul>
                </article>
                <!-- <ul id="stnLineCharts"></ul>
                <div style="clear: both;"></div> -->
            </div>
            <div style="clear: both;"></div>
            <div class="m-station" id="downStnLineDiv" style="display: none;">
                <article class="bus-stop-list bus-stop-list2" style="width:3270px" id="downArticleWidth">
                    <ul class="clearfix" id="downStnLineCharts">
                    </ul>
                </article>
                <!-- <ul id="downStnLineCharts"></ul>
                 -->
            </div>
        </div>
    </div>
    
    <div class="unsafe-map ct-shadow clearfix" id="unsafeTimeDiv"
         style="display: none;overflow: hidden;">
        <div class="unsage-map-box" style="height: 427px;">

            <div class="m-station" id="upTimeLineDiv">
                <!-- <article class="bus-stop-list bus-stop-list2" style="width:3270px" id="timeArticleWidth">
                </article> -->
                <div class="clearfix" id="timeLineCharts" style="width: 95%;">
                </div>
                <!-- <ul id="stnLineCharts"></ul>
                <div style="clear: both;"></div> -->
            </div>
            <div style="clear: both;"></div>
            <div class="m-station" id="downTimeLineDiv" style="display: none;">
                <!-- <article class="bus-stop-list bus-stop-list2" style="width:3270px" id="timeDownArticleWidth">
                </article> -->
                <div class="clearfix" id="timeDownStnLineCharts" style="width: 95%;">
                </div>
                <!-- <ul id="downStnLineCharts"></ul>
                 -->
            </div>
        </div>
    </div>
    
</div>
</body>
</html>
